<template>
  <div class="author">
    <img class="author-image" :src="bookDetail.image" alt="图书image" />
    <span class="title">{{ bookDetail.title }}</span>
    <span class="author-name">{{ author }}</span>
  </div>
</template>

<script>
  export default {
    props: ['bookDetail'],
    computed: {
      author() {
        const { author = [] } = this.bookDetail
        return author.length > 2 ? author.join('、') : author[0]
      }
    },
  }
</script>

<style scoped>
.author {
  margin: 20rpx 0;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  font-size: 28rpx;
}
.author-image {
  width: 240rpx;
  height: 360rpx;
}
.title {
  font-weight: bold;
}
.author-name {
  font-size: 24rpx;
  color: #bbb;
}
</style>